<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header />
    <!-- 主体部分 -->
    <div class="app-main">
      <!-- 左侧 -->
      <div class="app-left">
        <div class="app-left-item">
          <!-- 次级标题 -->
          <subheadings :name="'地震安全保障服务系统使用情况'" />
          <!-- 仪表盘统计 -->
          <dash-board :data="abSystemUseSituation" />
        </div>
        <div class="app-left-item">
          <subheadings :name="'系统成果统计'" />
          <achievement :statisticsData="abSystemAchievementsStatistics" />
        </div>
        <div class="app-left-item">
          <subheadings :name="'重大活动场所热度榜(频次)'" />
          <hot-list :data="abPlaceHotList" />
        </div>
      </div>
      <!-- 中心部分 -->
      <div class="app-center">
        <!-- 标题 -->
        <headline :name="'全国重大活动安保事件分布图'" />
        <!-- 地图 -->
        <div class="app-map">
          <!-- 系统切换 -->
			    <SystemSelect :styles="{ top: '-10px', left: '42px' }" />
          <IndexMap></IndexMap>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="app-right">
        <div class="app-right-item">
          <!-- 次级标题 -->
          <subheadings :name="'各省累积访问量TOP5'" />
          <Liveness :data="abProvinceActivationRank" />
        </div>
        <div class="app-right-item">
          <subheadings :name="'近五年重大活动安保数量统计'" />
          <LineChart :listData="abActivityNumStatistics" />
        </div>
        <div class="app-right-item">
          <!-- 重大活动安保事件 -->
          <SeamlessScroll :data="abActivityEvents" @typeSwitch="typeSwitch" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index">
//地图
import IndexMap from '@/views/securityActivity/map/index.vue';
import DashBoard from './components/DashBoard.vue'
import Achievement from './components/Achievement.vue'
import HotList from './components/HotList.vue'
import Liveness from './components/Liveness.vue'
import LineChart from './components/LineChart.vue'
import SeamlessScroll from './components/SeamlessScroll.vue'
import { getActivityMap } from '@/api/securityActivity.js'

// 用户使用情况
const abSystemUseSituation = ref([])
// 系统成果统计
const abSystemAchievementsStatistics = ref([])
// 重大活动场所热度榜
const abPlaceHotList = ref([])
// 各省活跃度排名
const abProvinceActivationRank = ref([])
// 安保数量统计
const abActivityNumStatistics = ref([])
// 安保事件(国家级) abActivityEvents0 省级 abActivityEvents1
const abActivityEvents = ref([])
const abActivityEvents0 = ref([])
const abActivityEvents1 = ref([])

getData()
function getData(){
  getActivityMap().then((res)=>{
    abSystemUseSituation.value = res.data.abSystemYseSituation
    abSystemAchievementsStatistics.value = res.data.abSystemAchievementsStatistics
    abPlaceHotList.value = res.data.abPlaceHotList
    abProvinceActivationRank.value = res.data.abProvinceActivationRank
    abActivityNumStatistics.value = res.data.abActivityNumStatistics
    abActivityEvents.value = res.data.abActivityEvents0
    abActivityEvents0.value = res.data.abActivityEvents0
    abActivityEvents1.value = res.data.abActivityEvents1
  })
}

function typeSwitch(val){
  if(val.value){
    abActivityEvents.value = abActivityEvents0.value
  }else{
    abActivityEvents.value = abActivityEvents1.value
  }
}

</script>

<style scoped lang="scss">
.app-main{
  display: flex;
  justify-content: space-between;

  .app-left{
    margin-left: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;
    
    &-item{
      width: 450px;
      height: 360px;
      // background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
      // opacity: .85;
      background: linear-gradient(135deg, rgba(0,3,45,.85) 0%, rgba(0,12,88,.85) 50%, rgba(0,3,45,.85) 100%);
      position: relative;
      &::after{
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png')!important;
      }
      &:nth-child(2){
        height: 240px;
      }
      &:nth-child(3){
        height: 300px;
      }
    }
  }

  .app-map{
    width: 960px;
    height:100%;
    //overflow: hidden;//test
    position: relative;
  }
  .app-right{
    margin-right: 30px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 40px);
    width: 450px;
    
    &-item{
      width: 450px;
      height: 300px;
      background: linear-gradient(135deg, rgba(0,3,45,.85) 0%, rgba(0,12,88,.85) 50%, rgba(0,3,45,.85) 100%);
      position: relative;
      &::after{
        content: '';
        display: block;
        width: 450px;
        height: 20px;
        background-size: 100% 100%;
        background-image: url('../../assets/images/common/bg_bottom.png')!important;
      }
    }
  }

  .system-select{
    top: -2px !important;
  }
}

</style>